<template>
    <div class='find-page'>
        <nav>
            <router-link class='nav-link' v-for="item in findList" :key="item.path" :to="item.path"
                active-class="on" >
                <p>{{ item.name }}</p>
            </router-link>
        </nav>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'find-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: "Find Page",
            findList: [
                {
                    path: '/find/test',
                    name: '推荐',
                },
                {
                    path: '/find/rank',
                    name: '排行榜',
                }, {
                    path: '/find/song-list',
                    name: '歌单',
                }, {
                    path: '/find/radio',
                    name: '主播电台',
                }, {
                    path: '/find/singer',
                    name: '歌手',
                }, {
                    path: '/find/new-albums',
                    name: '新碟上架',
                },
            ],
        }
    },
    created() {
        // this.
    }
}
</script>

<style scoped>
/* .find-page {
    position: relative;
} */

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute; */
    margin-top: -6px;
    height: 25px;
    background-color: #c20c0c;
}

.nav-link {
    /* position:absolute; */
    margin: 0 20px;
}

.nav-link {
    padding: 2px 10px;
    color: #fff;
    border-radius: 50px;
}

.on,
.nav-link:hover {
    background-color: #9b0909;
}
</style>